import React from "react";
import Style from "./index.module.less";
import Typography from "@/views/components/Typography";
import { Space, Button } from "antd";
import SettingModal from "./SettingModal";
import IconFont from "@/components/IconFont";
import OrderItem from "./OrderItem";
import AddGoods from "./AddGoods";
import DeleteGoods from "./DeleteGoods";
import { useScanRegistrationStore } from "../../store";

const RightMain = () => {
	const { orderList, isConfirmReceivingGoods, isDefectiveGoods } = useScanRegistrationStore();
	return (
		<div className={Style.rightMain}>
			<Typography as="s4" useBold>
				退货去向：销退仓（正常）、次品仓（次品）
			</Typography>
			<Space style={{ marginTop: 16 }}>
				<AddGoods />
				<DeleteGoods />
			</Space>

			<div className={Style.rightFloat}>
				{isConfirmReceivingGoods && <div className={`${Style.badge} ${isDefectiveGoods ? Style.red : ""}`}></div>}
				<SettingModal>
					<Typography color="#0068FF">
						<IconFont type="iconsetting" />
					</Typography>
					&nbsp;设置
				</SettingModal>
			</div>
			{orderList.map((item, index) => {
				return <OrderItem key={item.afterSaleId} data={item} index={index}></OrderItem>;
			})}
		</div>
	);
};

export default RightMain;
